<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程订单列表</title>
    <link rel="shortcut icon" href="../public/img/icon.png">
    <link rel="stylesheet" href="/lay-excel/layui/src/css/layui.css">
    <script src="/lay-excel/layui/src/layui.js"></script>
</head>
<style>

    *{
        margin:0;
        padding:0;
        list-style-type:none !important;
    }
    .navBar{
        width:100%;
        overflow: hidden;
        height:40px;
        line-height: 40px;
        background-color: #F3F3F3;
    }
    .navBar li{
        float:left;
        color:#666666;
    }
    .navBar button{
        color:white;
        height: 30px;
        line-height: 25px;
        background-color: #009688;
        border:1px solid #E4E4E4;
    }

    .navBar .li2{
        margin-left: 70%;
    }
    .layui-col-md8{
        border: 1px red solid;
        height:500px;
    }
    .courseCount{
        overflow: hidden;
    }
    .courseCount li{
        color:#666666;
        float:left;
        margin-left: 10px;
    }
    .courseCount li button{
        width:120px;
        background-color: white;
        border:1px solid #E4E4E4;
        text-align: center;
        height:25px;
        line-height: 25px;
    }
    .courseCount li span{
        color:red;
    }
    .courseCount li button:hover{
        color:#1ABC9C;
    }
    body .courseCount .li1{
        margin-left: 0px;
        color:white ;
        background-color:#1ABC9C;
    }
    body .courseCount .li1 button{
        color:white ;
        background-color:#1ABC9C;
    }
    body .courseCount .li1 span{
        color:white ;
    }
    .query{
        width:100%;
        color:#666666;
        margin-top: 20px;
        border: 1px solid #E4E4E4;
    }
    .query .ul1{
        font-size: 12px;
        background-color:#F3F3F3;
        border-bottom: 1px solid #E4E4E4;
        height:45px;
        line-height: 45px;
        overflow: hidden;
    }
    .query .ul1 li{
        float:left;
    }
    .query .ul1 button{
        background-color: white;
        border:1px solid #E4E4E4;
        color:#666666;
        width:70px;
        height:25px;
    }
    .query .ul1 .li1{
        margin-left: 3%;
    }
    .li2{
        margin-left: 63%;
    }
    .query .ul1 .li4{
        margin-left: 70%;
    }

    .query .ul1 .li3{
        margin-left: 2%;
    }
    input {
        width: 100%;
        height: 100%;
        margin:0;
        padding:0;
    }

</style>
<html>
<body>
<div class="layui-container">
    <div class="layui-row">
        <ul class="navBar">
            <li class="li1">订单详情</li>
            <li class="li2">
                <button type="button" class="layui-btn" class="layui-bg-green">
                    <i class="layui-icon layui-icon-refresh" class="layui-bg-green" onclick="refresh()"></i>
                    刷新
                </button>
            </li>
            <li class="li4">
                <button type="button" class="layui-btn" class="layui-bg-green" onclick="close1()">
                    <i class="layui-icon layui-icon-left" class="layui-bg-green" onclick=""></i>
                    关闭
                </button>
            </li>
            <li class="li3">
                <button type="button" class="layui-btn" class="layui-bg-green" >
                    <i class="layui-icon layui-icon-left" class="layui-bg-green" onclick=""></i>
                    <a href="JavaScript:history.go (-1)" style="color: white"> 返回</a>
                </button>
            </li>
        </ul>
    </div>

    <ul class="navBar1" style="width: 90%; margin-left: 5%" >
        <li class="li1" name="" style="color: red;background-color: #F2F2F2 ;">▯当前订单状态
            <span> <button type="button"class="layui-btn"class="layui-bg-green">备注订单</button></span>
        </li>
        <ul>
            <li>
                ▯基本信息
                <table class="layui-table">
                    <thead>
                    <tr>
                        <th>订单编号</th>
                        <th>用户账号</th>
                        <th>支付方式</th>
                        <th>订单来源</th>
                        <th>订单类型</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td  name="order_no"></td>
                        <td name="account"></td>
                        <td  name="order_payment_channel"></td>
                        <td name="order_source"></td>
                        <td name="order_type"></td>
                    </tr>
                </table>
            </li>
            <li>
                ▯商品信息
                <table class="layui-table">
                    <thead>
                    <tr>
                        <th>商品图片</th>
                        <th>商品名称</th>
                        <th>价格</th>
                        <th>分类编号</th>
                        <th>数量</th>
                        <th>类型</th>
                        <th>小计</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td><img src='../img/01.png'></td>
                        <td><span name="product_name"></span><div><span name="categroy_name">课程分类：</span><span></span></div></td>
                        <td><span>价格：￥</span><span name="currentprice_product"></span></td>
                        <td><span>分类编号：</span><span name="product_code"></span></td>
                        <td name="product_count"></td>
                        <td name="order_type"></td>
                        <td><span>￥</span><span name="price_total"></span></td>
                    </tr>
                    </tbody>
                </table>

            </li>
            <li>▯费用信息
                <table class="layui-table">
                    <thead>
                    <tr>
                        <th>商品合计</th>
                        <th>优惠劵</th>
                        <th>订单总金额</th>
                        <th>应付款金额</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td><span>￥</span><span name="price_total"></span></td>
                        <td><span>-￥</span><span name="coupon_price"></span></td>
                        <td><span  style="color: red">￥</span><span  style="color: red" name="logistics_fee"></span></td>
                        <td><span style="color: red">￥</span><span style="color: red" name="logistics_fee"></span></td>
                    </tr>
                    </tbody>
                </table>
            </li>
        </ul>
    </ul>
</div>
</body>
<script>
    //关闭
    function close1() {
        window.close()
    }
    //刷新
    function refresh() {
        location.reload();
    }
    //页面赋值
    layui.use(['element','layer','jquery'], function() {
        $ = layui.jquery;
        element = layui.element;
        layer = layui.layer;
        var $ = layui.jquery;
        $('td[name=order_no]').html(localStorage.getItem("order_no"));
        $('td[name=order_payment_channel]').html(localStorage.getItem("order_payment_channel"));
        $('td[name=account]').html(localStorage.getItem("account"));
        $('td[name=order_source]').html(localStorage.getItem("order_source"));
        $('td[name=order_logistics_number]').html(localStorage.getItem("order_logistics_number"));

        $('td[name=order_type]').html(localStorage.getItem("order_type"));

        $('td[name=product_code]').html(localStorage.getItem("product_code"));
        $('td[name=product_count]').html(localStorage.getItem("product_count"));
        $('span[name=product_code]').html(localStorage.getItem("product_code"));
        $('span[name=categroy_name]').html(localStorage.getItem("categroy_name"));
        $('span[name=coupon_price]').html(localStorage.getItem("coupon_price"));
        $('span[name=price_total]').html(localStorage.getItem("price_total"));
        $('span[name=product_name]').html(localStorage.getItem("product_name"));
        $('span[name=logistics_fee]').html(localStorage.getItem("logistics_fee"));
        $('span[name=currentprice_product]').html(localStorage.getItem("currentprice_product"));
    })

</script>

</html>
